<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" />
    <button>localStorage存储</button>
    <button>localStorage获取</button>
    <button>localStorage更新</button>
    <button>localStorage删除</button>
    <button>localStorage清除</button>

    <script>

        /*
        *  localStorage
        *  数据存在硬盘上
        *  永久生效
        *  20M
        * */

        var  txt=document.querySelector('input');
        var btns=document.querySelectorAll('button');

//        localStorage存储数据
        btns[0].onclick=function(){
            window.localStorage.setItem('userName',txt.value);
        }

//        localStorage存储数据
        btns[1].onclick=function(){
           txt.value= window.localStorage.getItem('userName');
        }

        btns[3].onclick=function(){
            window.localStorage.removeItem('userName');
        }

    </script>
</body>
</html>